<template>
  <div class="app-container">
    <el-card class="box-card">
      <!-- 搜索栏 -->
      <div class="filter-container">
        <el-input
          v-model="queryParams.name"
          placeholder="类型名称"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter="handleQuery"
        />
        <el-select
          v-model="queryParams.status"
          placeholder="状态"
          clearable
          style="width: 150px"
          class="filter-item"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" class="filter-item" @click="handleQuery">
          <el-icon><search /></el-icon>
          搜索
        </el-button>
        <el-button type="primary" class="filter-item" @click="handleAdd">
          <el-icon><plus /></el-icon>
          新增
        </el-button>
      </div>

      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="typeList"
        style="width: 100%"
        border
      >
        <el-table-column type="index" label="#" width="60" align="center" />
        <el-table-column prop="name" label="类型名称" min-width="150" />
        <el-table-column prop="icon" label="图标" width="150" align="center">
          <template #default="scope">
            <i :class="scope.row.icon" style="font-size: 18px;"></i>
            <span style="margin-left: 8px">{{ scope.row.icon }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="100" align="center" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="180" />
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              link
              size="small"
              @click="handleToggleStatus(scope.row)"
            >
              {{ scope.row.status === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button
              type="danger"
              link
              size="small"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 类型编辑对话框 -->
    <type-dialog ref="typeDialogRef" :id="currentId" @refresh="getList" @update:id="currentId = $event" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getLocationTypeList, deleteLocationType, updateLocationType } from '@/api/location'
import TypeDialog from './type-dialog.vue'
import { Search, Plus } from '@element-plus/icons-vue'

// 状态选项
const statusOptions = [
  { value: 1, label: '启用' },
  { value: 0, label: '禁用' }
]

// 查询参数
const queryParams = reactive({
  name: '',
  status: '',
  pageNum: 1,
  pageSize: 10
})

const loading = ref(false)
const typeList = ref([])
const total = ref(0)
const typeDialogRef = ref(null)
const currentId = ref(null)

// 查询列表
const getList = async () => {
  loading.value = true
  try {
    const res = await getLocationTypeList(queryParams)
    typeList.value = res.data.list || []
    total.value = res.data.total || 0
  } catch (error) {
    console.error('获取位置类型列表失败', error)
  } finally {
    loading.value = false
  }
}

// 查询按钮操作
const handleQuery = () => {
  queryParams.pageNum = 1
  getList()
}

// 重置按钮操作
const resetQuery = () => {
  queryParams.name = ''
  queryParams.status = ''
  handleQuery()
}

// 新增按钮操作
const handleAdd = () => {
  typeDialogRef.value.open()
}

// 编辑按钮操作
const handleEdit = (row) => {
  currentId.value = row.id
  typeDialogRef.value.open(row.id)
}

// 删除按钮操作
const handleDelete = (row) => {
  ElMessageBox.confirm(`确认删除位置类型"${row.name}"吗？`, '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await deleteLocationType(row.id)
      getList()
      ElMessage.success('删除成功')
    } catch (error) {
      console.error('删除位置类型失败', error)
      ElMessage.error(error.message || '删除失败')
    }
  }).catch(() => {})
}

// 切换状态
const handleToggleStatus = async (row) => {
  const newStatus = row.status === 1 ? 0 : 1
  const statusText = newStatus === 1 ? '启用' : '禁用'
  
  try {
    await updateLocationType(row.id, {
      ...row,
      status: newStatus
    })
    getList()
    ElMessage.success(`${statusText}成功`)
  } catch (error) {
    console.error(`${statusText}位置类型失败`, error)
    ElMessage.error(error.message || `${statusText}失败`)
  }
}

// 分页大小改变
const handleSizeChange = (size) => {
  queryParams.pageSize = size
  getList()
}

// 分页页码改变
const handleCurrentChange = (page) => {
  queryParams.pageNum = page
  getList()
}

onMounted(() => {
  getList()
})
</script>

<style scoped>
.filter-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.filter-item {
  margin-right: 10px;
  margin-bottom: 10px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style> 